<template>
	<div class="container">
		<div class="mb10">
			<label><input name="area" v-model="checkAll_common" class="mr4" type="checkbox"> 全选 - 常用地域  </label>
		</div>
		<div class="areas_list">
			<div class="left" style="flex: 1;">
				<div class="pr" v-for="(value, key) in areas" v-if="key<='J'">
					<div class="regionArea"><span>{{ key }}</span></div>
					<div class="regionProvince">
						<div class="provinceItem" v-for="(o,i) in value ">
							<label>		<input type="checkbox" :value="o.code" v-model="areasChecked">		<span class="regionName">{{ o.name }}</span>		</label>
						</div>
					</div>
				</div>
			</div>
			<div class="right" style="flex: 1;">
				<div class="pr" v-for="(value, key) in areas" v-if="key>'J'&& key<='Z' ">
					<div class="regionArea"><span>{{ key }}</span></div>
					<div class="regionProvince">
						<div class="provinceItem" v-for="(o,i) in value ">
							<label>		<input type="checkbox" :value="o.code" v-model="areasChecked">		<span class="regionName">{{ o.name }}</span>		</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mb10" style="margin-top: 20px;">
			<label><input name="area" v-model="checkAll_notcommon" class="mr4" type="checkbox"> 全选 - 非常用地域  </label>
		</div>
		<div class="areas_list">
			<div class="left" style="flex: 1;">
				<div class="pr">
					<div class="regionProvince">
						<div class="provinceItem" style="width: 10%;" v-for="(o,i) in areas['非常用地域'] ">
							<label>		<input type="checkbox" :value="o.code" v-model="areasChecked_notcommon">		<span class="regionName">{{ o.name }}</span>		</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<a href="javascript:;" v-show="!orSaveTem" class="n3-btn n3-btn-primary" @click="orSaveTem=true">保存为模板</a>
			<input type="text" placeholder="模板名" v-model="areaTemName" v-show="orSaveTem"  />
			<a href="javascript:;" v-show="orSaveTem" @click="saveAreaTem()">		    	
				<n3-icon type="check" size ="20px"  color="#4d7fff"></n3-icon>		    
			</a>
			<a href="javascript:;" v-show="orSaveTem" @click="orSaveTem=false" >		    	
				<n3-icon type="times" size ="20px"color="#cccccc"></n3-icon>		   
			</a>
		</div>
	</div>
</template>

<style src="./style.css" scoped lang="less"></style>

<script src="./script.js"></script>
